import { useState } from 'react';
import { Button, Modal, message } from 'antd';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import style from '@/components/Export/index.module.less'; // 直接复用导出按钮样式

export const BulkDeleteDoc = ({
  selectedDocs = [],
  onDelete,
  selectedCount = 0,
  loading = false
}) => {
  const [confirmVisible, setConfirmVisible] = useState(false);

  const handleDelete = () => {
    if (selectedCount === 0) {
      message.warning('请先选择要删除的文档');
      return;
    }
    setConfirmVisible(true);
  };

  const handleConfirmDelete = async () => {
    setConfirmVisible(false);
    if (onDelete) {
      await onDelete();
    }
  };

  return (
    <>
      <div className={style.box}>
        <Button
          type="primary"
          danger
          loading={loading}
          disabled={selectedCount === 0}
          onClick={handleDelete}
          style={{ width: 200, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
          <span className={style.firIcon}>
            <DeleteOutlined />
          </span>
          <span>
            批量删除{selectedCount > 0 && ` (${selectedCount})`}
          </span>
        </Button>
      </div>
      <Modal
        title="确认删除"
        open={confirmVisible}
        onOk={handleConfirmDelete}
        onCancel={() => setConfirmVisible(false)}
        okText="删除"
        okButtonProps={{ danger: true }}
        cancelText="取消"
        icon={<ExclamationCircleOutlined />}
      >
        <p>确定要删除选中的 {selectedCount} 个文档吗？此操作不可恢复！</p>
      </Modal>
    </>
  );
};

export default BulkDeleteDoc;